<template>
  <div class="header drag flex align-center justify-between">
    <div class="flex align-center">
      <Logo />
      <Arrow />
      <Search />
    </div>
    <div class="flex align-center">
      <User />
      <Menu />
    </div>
  </div>

</template>

<script>
import { ref, reactive, computed, watch, getCurrentInstance, toRefs } from 'vue'
import Logo from './modules/logo'
import Arrow from './modules/arrow'
import Search from './modules/search'
import User from './modules/user'
import Menu from './modules/menu'
export default {
  /**
   * 生命周期
   * created beforeCreate -> setup
   * beforMount -> onBeforeMount
   * mounted -> onMounted
   * beforeUpdate -> onBeforeUpdate
   * updated -> onUpdated
   * beforeDestroy -> onBeforeUnmount
   * destroyed -> onUnmounted
   * errorCaptured -> onErrorCaptured
   * 
   */
  components: {
    Logo,
    Arrow,
    Search,
    User,
    Menu
  },
  setup() {
    const { searchStr } = toRefs(reactive({
      searchStr: ''
    }))
    return {
      searchStr
    }
  }
}
</script>

<style lang='scss' scoped >
.header {
  background-color: $paimary;
  height: $header-height;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
}
</style>